﻿<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
  <title>商品列表—易购触屏版</title>
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/main.css">
  <link rel="stylesheet" href="./mui/css/mui.css">
  <link rel="stylesheet" href="./mui/css/icons-extra.css">
</head>

<body>
  <div id="app">
    <!-- 公用头部导航 -->
    <nav class="nav">
      <a class="goback" href="javascript:history.back(1)">
        <span class="mui-icon mui-icon-undo"></span>
      </a>
      <div class="nav-title">商品列表</div>
    </nav>
    <!-- 页面主体 -->
    <section class="layout">
      <ul class="jhy1 wbox" id="myul">
      </ul>
    </section>
    <!-- 公用尾部 -->
    <footer class="footer">
      <a href="#">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a href="#">
        <span class="mui-icon mui-icon-personadd"></span>
        <span class="mui-tab-label">分类</span>
      </a>
      <a href="#">
        <span class="mui-icon mui-icon-extra mui-icon-extra-cart"></span>
        <span class="mui-tab-label">购物车</span>
      </a>
      <a href="#">
        <span class="mui-icon mui-icon-gear"></span>
        <span class="mui-tab-label">我的</span>
      </a>
    </footer>
  </div>
</body>

</html>
<script src="./js/axios.min.js"></script>
<script>
  //axios发送请求，then根据请求结果进行处理
  axios({
    method: 'post',
    url: 'http://localhost:8090/h1/goods/list'
  }).then(res => {
    // console.log(res.data);
    if (res.data.success) {
      //1.获取列表对象
      // const mull=document.getElementById('myul')
      const myul = document.querySelector('#myul')
      //2.通过遍历数组
      const list = res.data.list
      for (let i in list) {
        //3.创建li列表子项
        const li = `
        <li>
          <a href="#">
            <img src="${list[i].imagePath}" />
            <p>${list[i].title}</p>
            <span class="snPrice">&yen;<em>${list[i].price}</em></span>
          </a>
        </li>
        `
        //4.将列表子项添加到列表中
        myul.innerHTML+=li
      }
    }
  })
</script>